'use client'

import React, { useState, useEffect } from 'react'
import Link from 'next/link'
import { Layout, Menu, Dropdown, Avatar, Button, Space } from 'antd'
import { SettingOutlined, HomeOutlined, UserOutlined, PictureOutlined, FileTextOutlined, CommentOutlined, LogoutOutlined } from '@ant-design/icons'

const { Header, Sider, Content, Footer } = Layout

interface User {
  id: string;
  username: string;
  password: string;
  avatar?: string;
  bio?: string;
  isActive?: boolean;
  createdAt?: Date;
  updatedAt?: Date;
  role?: number;
}

interface AppShellProps {
  children: React.ReactNode;
  user?: User | null;
  onLogout?: () => void;
}

export default function AppShell({ children, user, onLogout }: AppShellProps) {
  const [currentYear, setCurrentYear] = useState('2025') // 默认值，将在客户端更新 
  const sideMenuItems = [
    { key: 'home', icon: <HomeOutlined />, label: <Link href="/">首页</Link> },
    { key: 'dashboard', icon: <HomeOutlined />, label: <Link href="/dashboard">仪表盘</Link> },
    
    {
      key: 'content',
      icon: <FileTextOutlined />,
      label: '内容管理',
      children: [
        { key: 'category', label: <Link href="/category">分类管理</Link> },
        { key: 'tag', label: <Link href="/tag">标签管理</Link> },
        { key: 'article', label: <Link href="/article">文章浏览</Link> },
        { key: 'articleSH', label: <Link href="/articleSH">文章审核</Link> }
      ],
    },
    
    {
      key: 'interaction',
      icon: <CommentOutlined />,
      label: '互动管理',
      children: [
        { key: 'comment', label: <Link href="/comment">评论管理</Link> },
        { key: 'like', label: <Link href="/like">点赞管理</Link> }
      ],
    },
    
    {
      key: 'user',
      icon: <UserOutlined />,
      label: '用户管理',
      children: [{ key: 'users', label: <Link href="/users">用户列表</Link> }],
    },
    
    {
      key: 'system',
      icon: <SettingOutlined />,
      label: '系统管理',
      children: [
        { key: 'sensitiveword', label: <Link href="/sensitiveword">敏感词管理</Link> },
        { key: 'log', label: <Link href="/log">操作日志</Link> },
        { key: 'roles', label: <Link href="/roles">角色管理</Link> },
        { key: 'accounts', label: <Link href="/accounts">账号管理</Link> },
      ],
    },
  ]

  // 使用 useEffect 只在客户端计算当前年份，避免 hydration 错误
  useEffect(() => {
    setCurrentYear(new Date().getFullYear().toString())
  }, [])

  // 用户下拉菜单
  const userMenuItems = [
    {
      key: 'logout',
      label: (
        <Button type="text" icon={<LogoutOutlined />} onClick={onLogout}>
          退出登录
        </Button>
      ),
    },
  ]

  return (
    <Layout className="h-screen">
      <Header className="flex items-center justify-between border-b border-gray-200 !bg-white px-6">
        <div className="flex items-center gap-4">
          <strong className="text-base">LL博客后台管理系统</strong>
        </div>
        
        {/* 用户信息区域 */}
        {user && (
          <div className="flex items-center gap-3">
            <span className="text-sm text-gray-600">欢迎，{user.username}</span>
            <Dropdown 
              menu={{ items: userMenuItems }} 
              placement="bottomRight"
              trigger={['click']}
            >
              <div className="flex items-center gap-2 cursor-pointer hover:bg-gray-100 px-2 py-1 rounded">
                <Avatar 
                  size="small" 
                  icon={<UserOutlined />}
                  src={user.avatar}
                  className="bg-blue-500"
                />
                <span className="text-sm text-gray-700">{user.username}</span>
              </div>
            </Dropdown>
          </div>
        )}
      </Header>

      <Layout className="relative flex-1 overflow-hidden">
        <Sider width={220} className="hidden border-r border-gray-200 bg-white lg:block">
          <Menu mode="inline" items={sideMenuItems} className="h-full" />
        </Sider>

        <Layout className="flex min-h-0 flex-col">
          <Content className="flex-1 overflow-auto p-6">{children}</Content>
          <Footer className="text-center">© {currentYear} 后台管理系统</Footer>
        </Layout>
      </Layout>
    </Layout>
  )
  }
